<template>
  <div class="top">
    <div class="logo">
      <a href="#" @click.prevent="toIndex()"><img :src="require('@/assets/images/logo.png')" /></a>
    </div>
    <div class="search">
      <form @submit.prevent>
        <input type="text" class="s_ipt" v-model="product" />
        <input type="submit" value="搜索" class="s_btn" @click="searchProduct()" />
      </form>
      <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a
          href="#">日用品</a><a href="#">连衣裙</a></span>
    </div>
    <div class="i_car" @mouseenter="getAllBuyCar(1, 5)">
      <div class="car_t">购物车 [ <span>{{ buyCarList.length }}</span> ]</div>
      <div class="car_bg">
        <!--Begin 购物车未登录 Begin-->
        <div class="un_login" v-if="userId == null || userId == ''">
          还未登录！<a href="#" @click.prevent="toLogin()" style="color: #ff4e00">马上登录</a>
          查看购物车！
        </div>
        <div class="un_login"
          v-if="userId != null && userId != '' && (pageInfo.list.length == 0 || pageInfo.list == null)">
          购物车空空如也！<a href="#" @click.prevent="toIndex()" style="color: #ff4e00">去添加喜欢的商品吧！</a>
        </div>
        <!--End 购物车未登录 End-->
        <!--Begin 购物车已登录 Begin-->
        <ul class="cars" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
          <li v-for="buyCar in pageInfo.list" :key="buyCar.id">
            <div class="img">
              <a href="#"><img :src="'http://192.168.144.183:9090/easybuyImages/' + buyCar.product.fileName" width="58"
                  height="58" /></a>
            </div>
            <div class="name">
              <a href="#">{{ buyCar.product.name }}</a>
            </div>
            <div class="price">
              <font color="#ff4e00">￥{{ buyCar.product.price }}</font> X{{ buyCar.number }}
            </div>
          </li>
        </ul>
        <div class="price_sum" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
          共计&nbsp; <font color="#ff4e00">￥</font><span>{{ getTotalPrice() }}</span>
        </div>
        <div class="price_a" v-if="pageInfo.list.length != 0 && pageInfo.list != null">
          <a href="#" @click.prevent="toBuyCar()">去购物车结算</a>
        </div>
        <!--End 购物车已登录 End-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderSearch',
  data() {
    return {
      userId: '',
      pageInfo: '',
      product: '',
      buyCarList: []
    }
  },
  methods: {
    toIndex() {
      this.product = '';
      if (!(this.$route.path === '/')) {
        this.$router.push('/')
      }
    },
    toLogin() {
      this.$router.push('/login')
    },
    toBuyCar() {
      this.$router.push('/buycar')
    },
    searchProduct() {
      this.$router.push({
        path: 'search',
        query: {
          product: this.product
        }
      }).catch(() => { });
    },
    getAllBuyCar(pageNum, pageSize) {

      this.$axios({
        url: 'selectBuyCarByPage',
        method: 'post',
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          userId: this.userId
        },
        headers: {
          'content-type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.pageInfo = rs.data.pageInfo
          console.log(this.pageInfo)
          console.log(this.pageInfo.list.length)
          this.getBuyCars()
        }
      })


    },
    getTotalPrice() {
      this.totalPrice = 0;
      for (let buyCar of this.buyCarList) {
        let count = buyCar.number * buyCar.product.price
        this.totalPrice = this.totalPrice + count
      }
      return this.totalPrice.toFixed(2)
    },
    getBuyCars() {

      this.$axios({
        url: 'selectAllBuyCar',
        params: {
          userId: this.userId
        }
      }).then(rs => {
        if (rs.data.code == 5200 || rs.data.code == '5200') {
          this.buyCarList = rs.data.allBuyCar
        }
      })
    }


  },
  mounted() {
    this.userId = window.sessionStorage.getItem('userId')
    console.log(this.userId)
    this.getAllBuyCar(1, 5)
    this.getBuyCars()


  }
}


</script>

<style></style>